<template>
  <div>
    <table class="table table-sm table-bordered table-vertical-middle approve-table">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tr class="bg-light">
        <td colspan="4" class="text-center py-2">保全登记</td>
      </tr>
      <tr>
        <td>登记时间</td>
        <td :class="tdClass" colspan="3" class="text-left">
          <span v-if="isView">{{ $utils.dateFormat(formData.preser_register_time, dateFor) }}</span>
          <el-date-picker
            v-else
            type="date"
            class="w-100"
            value-format="yyyy-MM-dd"
            placeholder="登记时间"
            v-model="formData.preser_register_time"
          ></el-date-picker>
        </td>
      </tr>
      <tr>
        <td>冻结资产</td>
        <td colspan="3" :class="tdClass" class="text-left">
          <span v-if="isView">{{ formData.freeze_assets }}</span>
          <el-input
            v-else
            v-model="formData.freeze_assets"
            type="textarea"
            :rows="5"
            placeholder="冻结资产"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>保全资产</td>
        <td colspan="3" :class="tdClass" class="text-left">
          <span v-if="isView">{{ formData.preser_assets }}</span>
          <el-input
            v-else
            v-model="formData.preser_assets"
            type="textarea"
            :rows="5"
            placeholder="保全资产"
          ></el-input>
        </td>
      </tr>
    </table>

    <div class="text-center my-3" v-if="!isView">
      <el-button class="btn-long" type="primary" :loading="saveLoading" @click="submit">
        保存
      </el-button>

      <el-button class="btn-long" @click="beforClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    queryId: String,
    lawsuitData: {
      type: Object,
      default: () => ({}),
    },
    viewMode: Boolean,
  },
  data() {
    return {
      saveLoading: false,
      dateFor: 'yyyy-MM-dd',
      tableName: 'litigation_register',
      formData: {},
    }
  },
  computed: {
    ...mapGetters(['user']),
    tdClass() {
      return this.isView ? '' : 'report-input-td'
    },
    isView() {
      return this.viewMode
    },
    tableId() {
      return this.lawsuitData.litigation_register_id || ''
    },
  },
  watch: {
    lawsuitData: {
      handler: function () {
        this.formData = { ...this.lawsuitData }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async submit() {
      if (!this.validate()) {
        return false
      }
      this.saveLoading = true
      const data = {
        customer_related_id: this.queryId,
        preser_register_time: this.formData.preser_register_time,
        freeze_assets: this.formData.freeze_assets,
        preser_assets: this.formData.preser_assets,
        is_preser: 1,
      }
      this.tableId
        ? await this.$api.updateData(this.$serviceName, this.tableName, this.tableId, data)
        : await this.$api.addData(this.$serviceName, this.tableName, {
            ...data,
            submit_person_name: this.user.realName,
          })

      this.$emit('success')
      this.$message.success('保存成功')

      this.saveLoading = false
    },
    validate() {
      if (!this.queryId) {
        this.$message.error('请选择登记项目')
        return false
      }
      const enumValidator = {
        preser_register_time: '请选择登记时间',
      }
      for (const key of Object.keys(enumValidator)) {
        if (!this.formData[key]) {
          this.$message.error(enumValidator[key])
          return false
        }
      }

      return true
    },
    beforClose() {
      this.$emit('dismiss')
    },
  },
}
</script>

<style lang="scss" scoped>
.approve-table {
  text-align: center;
  margin-bottom: 0;
  margin-top: -1px;
  td {
    vertical-align: middle;
  }
}
</style>
